.header{
    z-index: 10000;
    position: sticky;
    top: 0;
    left: 0;
    .navbar-inverse{
        border-radius: 0;
        margin-bottom: 0;
        opacity: 1;
        .container{
            padding: 0;
            .navbar-header{
                .navbar-brand{
                    width: 7em;
                    padding: 1px 0;
                    img{
                        width: 100%;
                        height: 100%;  
                    }
                }
            }
            .collapse{
                .navbar-nav{
                    margin-left: 10em;
                }
                .navbar-img{
                    margin-top: 10px;
                    width: 10%;
                    display: flex;
                    justify-content: space-between;
                    align-content:center;
                    .item{
                        width: 35%;
                        height: 24px;
                        cursor: pointer;
                        align-content:center;
                        img{
                            width: 45%;
                        }
                    }
                }
            }
        }
    }
   

    @media screen and (max-width:1200px) {
        &{
            .navbar-inverse{
                .container{
                    .collapse{
                        .navbar-nav{
                            margin-left: 5em;
                        }
                    }  
                }
            }
        }
    }
    @media screen and (max-width:1000px) {
        &{
            .navbar-inverse{
                .container{
                    .navbar-header{
                        .navbar-brand{
                            img{
                                width: 100%;
                                height: 80%;
                            }
                        } 
                    }
                    .collapse{
                        .navbar-img{
                            margin-right:-70px;
                        }
                        .navbar-nav{
                            margin-left: 0em;
                        }
                    }  
                }
            }
            .nav>li>a{
                padding: 10px 13px;
            }
            
        }
        
    }
    @media screen and (max-width:830px) {
        &{
            .navbar-inverse{
                .container{
                    .navbar-header{
                        .navbar-brand{
                            img{
                                width: 90%;
                                height: 90%;
                                margin-left: 10px;
                            }
                        } 
                    }
                    .collapse{
                        .navbar-img{
                            margin-right:-30px;
                        }
                        .navbar-nav{
                            margin-left: 0em;
                        }
                    }  
                }
            }
            .nav>li>a{
                padding: 10px 10px;
            }
            
        }
        
    }
    @media screen and (max-width:750px) {
        &{
            .navbar-inverse{
                padding: 0 2em;
                .container{
                    .collapse{
                        .navbar-nav{
                            margin-left: 0em;
                            text-align: center;
                        }
                        .navbar-img{
                            margin: 0 auto;
                            .item{
                                width: 50%;
                                align-content:center;
                                img{
                                    width:65%;
                                }
                            }
                        }
                    }  
                }
            }
        }
    }
    @media screen and (max-width:380px) {
        &{
            .navbar-inverse{
                .container{
                    .navbar-header{
                        .navbar-brand{
                            img{
                                width: 90%;
                                height: 70%;
                                margin-left: 10px;
                            }
                        } 
                    }
                    .collapse{
                        .navbar-img{
                            margin-right:-30px;
                        }
                        .navbar-nav{
                            margin-left: 0em;
                        }
                    }  
                }
            }
            .nav>li>a{
                padding: 10px 10px;
            }
            
        }
        
    }
    
}

.banner{
    .carousel{
        .carousel-indicators {
            li{
                width: 55px;
                height: 4px;
            }
            
        }
    }
    .carousel-inner{
        position: relative;
        top: 0;
        left: 0;
        .item{
            .box2{
                position: absolute;
                top: 20%;
                left: 17%;
                line-height: 4em;
                h1{
                    text-align: left;
                    color: #fff;
                    font-size: 3em;
                }
                p{

                    color: #cccccc;
                }
                button{
                    width:8em;
                    height: 30px;
                    line-height: 27px;
                    background: #d2a54a;
                    color: #fff;
                }
            }
        }
    }
   @media screen and (max-width:1000px) {
        &{
            .carousel-inner{
                .item{
                    .box2{
                        line-height: 3em;
                        h1{
                            font-size: 2em;
                        }
                        p{
                            font-size: 10px;
                        }
                        button{
                            width: 7em;
                         
                        }
                    }
                }
            }
        }
   }  
   @media screen and (max-width:830px) {
    &{
        .carousel-inner{
            .item{
                .box2{
                    line-height: 2.5em;
                    h1{
                        font-size: 1.5em;
                    }
                    p{
                        font-size: 10px;
                    }
                    button{
                        width: 7em;
                     
                    }
                }
            }
        }
    }
   }    
   @media screen and (max-width:650px) {
    &{
        .carousel-inner{
            .item{
                .box2{
                    line-height: 2em;
                    h1{
                        font-size: 1.1em;
                    }
                    p{
                        font-size: 10px;
                    }
                    button{
                        width: 6em;
                        height: 30px;
                        line-height: 24px;
                        span{
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }
   }  
   @media screen and (max-width:590px) {
    &{
        .carousel-inner{
            .item{
                .box2{
                    line-height: 1.5em;
                    h1{
                        font-size: 1em;
                    }
                    p{
                        font-size: 10px;
                    }
                    button{
                        width: 6em;
                        height: 30px;
                        line-height: 24px;
                        span{
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }
   } 
   @media screen and (max-width:430px) {
    &{
        .carousel-inner{
            .item{
                .box2{
                    line-height: 1.1em;
                    h1{
                        
                        font-size: 10px;
                    }
                    p{
                        font-size: 10px;
                        margin-bottom: 3px;
                    }
                    button{
                        width: 75px;
                        height: 25px;
                        line-height: 20px;
                        span{
                            font-size: .5em;
                        }
                    }
                }
            }
        }
    }
   }   
}

/* work */
.work{
    padding:5em 0em 2em;

    .subject{
        text-align: center;
        padding-bottom:1.5em;
        margin-bottom:3em;

        .title{
            font-family: OSLight;
            font-size:3em;
            text-transform: uppercase;

            span{
                font-family: OSBold;
            }
        }
    }

    .info{
        width:85%;
        margin:0 auto;
        color:#636363;
        font-family: OSLtalic;
        font-size:1.1em;
        text-align: center;
        line-height:1.7em;
        margin-bottom:6em;
    }
    
    .typelist{
        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom:2em;

            .left{
                .title{
                    font-family: OSBold;
                    font-size:1.2em;
                    text-transform: uppercase;
                }
            }

            .right{
                a{
                    text-transform: capitalize;
                    color:#636363;
                    font-family: OSLight;
                    transition:all linear .2s;
                    font-size:1.2em;
                    border-right: 1px solid #636363;
                    padding:0em 1em;

                    &:hover{
                        color:#070707;
                        font-weight: bold;
                    }

                    &:last-child{
                        border-right: 0px;
                        padding-right:0;
                    }
                }
            }
        }

        .list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item{
                width: 25%;
                margin-bottom:2em;
                position: relative;
                img{
                    width:100%;
                }

                .black{
                    width: 100%;
                    height: 100%;
                    background: rgba(190, 153, 74, 0.8);
                    position: absolute;
                    top: 0;
                    left: 0;
                    text-align: center;
                    cursor: pointer;
                    line-height: 4em;
                    opacity: 0;
                    transition: all linear .3s;

                    

                    span{
                        display: block;
                        font-family:OSBold ;
                        font-size: 1.2em;
                        color: #fff;
                        text-transform: uppercase;
                        margin-bottom: 1em;
                        margin-top: 2em;
                        
                        
                    }
                    p{
                        display: block;
                        font-family: OSLight;
                        color: #fff;
                        margin-bottom: 2em;
                    }
                    .radius{
                        width: 3em;
                        height: 3em;
                        border-radius: 100%;
                        border: 3px solid #fff;
                        margin: 0 auto;
                        line-height: 3em;
                        
                    }
                    a{
                        color: #fff;
                        font-size: 1.8em;
                    }
                    &:hover{
                        opacity: 1;
                    }
                }
                
                
            }
        }



        
    }

    @media screen and (max-width:1000px){
        &{
            
            .typelist{
                .list{
                    .item{
                        .black{
                          line-height: 2em;
                           
                            
                        }
                    }
                }
                
            }
           
            
        }
    }

    // ipad
    @media screen and (max-width:780px) and (max-height:1050px){
        &{
            .typelist{
                .list{
                    .item{
                        width:48%;
                    }
                }
            }
        }
    }

    @media screen and (max-width:650px){
        &{
            .subject{
                .title{
                    font-size:2em;
                }
            }


            .typelist{
                .top{
                    .left{
                        display: none;
                    }

                    .right{
                        width:100%;
                    }
                }

                .list{
                    .item{
                        width:45%;
                    }
                }
            }
        }
    }

    @media screen and (max-width:580px) {
        &{
            .typelist{
                .list{
                    .item{
                        .black{
                            line-height: 2em;
                            
                            p{
                                margin-bottom: 1em;
                            }
                        }
                    }
                }
            }
            
        }
    }

    @media screen and (max-width:470px){
        &{
            .subject{
                .title{
                    font-size:1.5em;
                }
            }

            .info{
                width:100%;
                margin-bottom:1em;
            }

            .typelist{
                .top{
                    .right{
                        a{
                            font-size:.5em;
                            
                        }
                    }
                }
            }
            .black{
                span{
                    font-size: .5em;
                }
                p{
                    margin-bottom: 1em;
                }
            }
        }
    }

    @media screen and (max-width:420px){
        &{
            .subject{
                .title{
                    font-size:1.5em;
                }
            }

            .info{
                width:100%;
                margin-bottom:1em;
            }

            .typelist{
                .top{
                    .right{
                        a{
                            font-size:.5em;
                            
                        }
                    }
                }
            }
            .item{
                .black{
                    line-height: 2.5em;
                    p{
                        margin-bottom: 1em;
                    }
                    span{
                        font-size: .5em;
                    }
                    
                }
            }
            
        }
    }
    @media screen and (max-width:380px){
        &{
            
            .typelist{
                .list{
                    .item{
                        .black{
                            line-height: 2em;
                            p{
                                height:4em;
                                margin-bottom: 1em;
                                overflow-y: scroll;
                            }
                            span{
                                font-size: .5em;
                            }
                            
                        }
                    }
                }
                
            }
           
            
        }
    }

}

.left1{
    .ss{
        .text{
            display: flex;
            width: 100%;
            .left{
                width: 60%;
                background: #262729;
                position: relative;
                color: #fff;
                .wzk{
                    position: absolute;
                    top: 25%;
                    left: 20%;
                    line-height: 3em;

                    button{
                        width: 8em;
                        border-radius: 29px;
                        background: #d2a54a;
                        p{
                            font-size: 14px;
                        }
                    }
                }
                
                
            }
            .right{
                width: 40%;
                img{
                    width: 100%;
                }
            }
        }

    }
    @media screen and(max-width:1380px) {
        &{
            .ss{
                .text{
                  .left{
                    .wzk{
                        top: 20%;
                        line-height: 2.5em;
                        button{
                            margin-top: 1em;
                        }
                    }
                  }
                }
            }
        }
    }
    @media screen and(max-width:1250px) {
        &{
            .ss{
                .text{
                  .left{
                    .wzk{
                        line-height: 2em;
                    }
                  }
                }
            }
        }
    }
    @media screen and(max-width:1250px) {
        &{
            .ss{
                .text{
                  .left{
                    .wzk{
                        top:18%;
                        line-height: 1.6em;
                    }
                  }
                }
            }
        }
    }

    @media screen and(max-width:940px) {
        &{
            .ss{
                .text{
                    flex-wrap: wrap;
                  .left{
                    width: 100%;
                    height: 25em;
                    .wzk{
                        top: 20%;
                        line-height: 1.6em;
                        button{
                            margin-top: 1em;
                        }
                    }
                  }
                  .right{
                    width: 100%;
                  }
                }
            }
        }
    }
    @media screen and(max-width:550px) {
        &{
            .ss{
                .text{
                  .left{
                    .wzk{
                        top: 10%;
                    }
                  }
                }
            }
        }
    }
    @media screen and(max-width:420px) {
        &{
            .ss{
                .text{
                  .left{
                    .wzk{
                        top: 7%;
                        line-height: 1.8em;
   
                        button{
                            margin-top: 0;
                        }
                    }
                  }
                }
            }
        }
    }
    @media screen and(max-width:380px) {
        &{
            .ss{
                .text{
                    .left{
                        height: 30em;
                        .wzk{
                            top:10%;
                            line-height: 1.8em;
                            button{
                                width: 6em;
                                border-radius: 29px;
                                background: #d2a54a;
                                
                                p{
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }    
    }
}

.products{
    padding: 5em 0;
    .container{
        .top{
            text-align: center;
            h1{
                font-size: 30px;
            }
            p{
                font-size: 12px;
            }
            .bts{
                display: inline-block;
                width: 6%;
                height: 2px;
                background: #d2a54a;
            }
        }
        .box{
            display: flex;
            justify-content: space-between;
            width: 100%;
            text-align: center;
            .item{  
                width: 24%;
            }
        }
    }

    @media screen  and(max-width:500px){
        &{
            .container{
                .box{
                    flex-wrap: wrap;
                    .item{
                        width: 48%;
                    }
                }
            }
        }
    }
    
}

.new{
    background: #f2f1f0;
    .container{
        .top{
            text-align: center;
            h1{
                font-size: 30px;
            }
            p{
                font-size: 12px;
            }
            .bts{
                display: inline-block;
                width: 6%;
                height: 2px;
                background: #d2a54a;
            }
        }
        .box1{
            display: flex;
            justify-content: space-between;
            width: 100%;
            text-align: left;
            
            .item1{  
                width: 30%;
                p{
                    padding: 1em 0;
                }
                
            }
        } 
    }
    @media screen and(max-width:500px) {
        &{
            .container{
                .box1{
                    .item1{
                        p{
                            padding: 0;
                            overflow-y: scroll;
                            height: 4em;
                        }
                    }
                }
            }
        }
    }
}

.yellow{
    height: 3em;
    background: #d6a849;
    display: flex;
    align-items: center;
    .abc{
        margin: 0 auto;
        
    }
}


.car{
    .container{
        .box2{
            display: flex;
            justify-content: space-between;
            width: 100%;
            text-align: center;
            .list{
                width: 25%;
                padding: 2em 0;
                line-height: 4em;

               
                .list3{
                    

                    p{
                        color: #cccccc;
                    }
                }
            }
        }
    }
    @media screen and(max-width:735px) {
        &{
            .container{
                .box2{
                    flex-wrap: wrap;
                    .list{
                        width: 50%;
                    }
                }
            }
        }
    }
}


.right1{
   background: #f2f1f0;
   height: 8em;
   display: flex;
   align-items: center;

   
   padding-left: 10em;
    a{
        text-transform: capitalize;
        color:#636363;
        font-family: OSLight;
        transition:all linear .2s;
        font-size:1.2em;
        border-right: 1px solid #636363;
        padding:0em 1em;

        &:hover{
            color:#070707;
            font-weight: bold;
        }

        &:last-child{
            border-right: 0px;
            padding-right:0;
        }
    }

    @media screen and(max-width:1100px) {
        &{
            a{
                font-size: 1em;
            }
        }
    }
    @media screen and(max-width:930px) {
        &{
            a{
                font-size: 13px;
            }
        }
    }
    @media screen and(max-width:880px) {
        &{
            a{
                font-size: 10px;
            }
        }
    }
    @media screen and(max-width:770px) {
        &{
            a{
                font-size: 6px;
            }
        }
    }
    @media screen and(max-width:600px) {
        &{
            padding: 0;
            a{
                font-size: 6px;
            }
        }
    }
    @media screen and(max-width:500px) {
        &{
            width: 100%;
            flex-wrap: wrap;
            padding: 0;
            .das{
                width: 100%;
                text-align: center;
            }
            .asd{
                text-align: center;
                width: 100%;
            }
        }
    }
}



.footer{
    background: #000;
    .container{
        
        .work{
            padding: 5em;
            display: flex;
            justify-content: space-around;

           
            .t1{
                color: #fff;
                line-height: 3em;

                span{
                    font-weight: bold;
                }
            }

            .t2{
                
                .bon{
                    display: flex;
                    justify-content: space-between;
                    padding: 1em;
                    text-align: center;
                    color:#fff;
                    line-height: 2em;
                }
            }
        }
    }

    @media screen and(max-width:650px) {
          &{
              .container{
                  .work{
                      flex-wrap: wrap;
                      .t1{
                          width: 100%;
                          text-align: center;

                          p{
                              display: none;
                          }
                      }
                      .zzz{
                         display: none;
                      }
                  }
              }
          }  
    }
    @media screen and(max-width:900px) {
        &{
            .container{
                .work{
                   
                    .t1{
                       line-height: 2em;
                    }
                }
            }
        }  
  }
}

.di{
    width: 100%;
    height: 6em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .jt{
        width: 40%;
       letter-spacing: 3px;
        display: flex;
        justify-content: space-evenly;

        .jt2{
            display: flex;
            align-items: center;
        }
    }
    
  @media screen and(max-width:720px) {
      &{
          flex-wrap: wrap;

          .jt{
              width: 100%;
          }
      }
  }
}



/* 返回顶部 */
#gotop {
    position: fixed;
    bottom: 90px;
    right: 0%;
    width: 80px;
    cursor: pointer;
    z-index: -99998;
    opacity: 0;

    transition: all linear .4s;

    &:hover {
        animation: rubberBand 1s;
    }

    @keyframes rubberBand {
        from {
          transform: scale3d(1, 1, 1);
        }
      
        30% {
          transform: scale3d(1.25, 0.75, 1);
        }
      
        40% {
          transform: scale3d(0.75, 1.25, 1);
        }
      
        50% {
          transform: scale3d(1.15, 0.85, 1);
        }
      
        65% {
          transform: scale3d(.95, 1.05, 1);
        }
      
        75% {
          transform: scale3d(1.05, .95, 1);
        }
      
        to {
          transform: scale3d(1, 1, 1);
        }
      }
}
